<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>renren-aui</title>
  <link rel="stylesheet" href="../../aui/plugins/ionicons-4.3.0/css/ionicons.min.css">
  <link rel="stylesheet" href="../../aui/css/element-theme/index.css">
  <link rel="stylesheet" href="../../aui/css/aui.css">
</head>
<body>
  <div v-cloak class="aui-wrapper aui-page__form-step">
    <div class="aui-content__wrapper">
      <main class="aui-content">
        <el-card shadow="never" class="aui-card--fill">
          <el-steps class="step-statusbar" :active="stepActive" align-center finish-status="success">
            <el-step title="填写转账信息"></el-step>
            <el-step title="确认转账信息"></el-step>
            <el-step title="完成"></el-step>
          </el-steps>
          <el-form v-if="stepActive === 0" class="step-form" :model="dataForm" :rules="dataRule" ref="dataForm" @keyup.enter.native="dataFormSubmitHandle()" label-width="120px">
            <el-form-item label="付款账户：" prop="payAccount">
              <el-select v-model="dataForm.payAccount" placeholder="请选择" style="width: 100%;">
                <el-option value="service@renren.io" label="service@renren.io"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="收款账户：" prop="receiverAccount">
              <el-input placeholder="收款账户" v-model="dataForm.receiverAccount">
                <el-select v-model="dataForm.receiverType" slot="prepend" placeholder="请选择" style="width: 105px;">
                  <el-option :value="1" label="支付宝"></el-option>
                  <el-option :value="2" label="微信"></el-option>
                  <el-option :value="3" label="银行账户"></el-option>
                </el-select>
              </el-input>
            </el-form-item>
            <el-form-item label="收款人姓名：" prop="receiverName">
              <el-input v-model="dataForm.receiverName" placeholder="收款人姓名"></el-input>
            </el-form-item>
            <el-form-item label="转账金额：" prop="amount">
              <el-input
                placeholder="转账金额"
                v-model="dataForm.amount">
                <i slot="prefix" class="el-input__icon icon ion-logo-yen"></i>
              </el-input>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="dataFormSubmitHandle()">下一步</el-button>
            </el-form-item>
          </el-form>
          <el-form v-if="stepActive === 1" class="step-form" :model="dataFormTwoStep" :rules="dataRuleTwoStep" ref="dataFormTwoStep" @keyup.enter.native="dataFormTwoStepSubmitHandle()" label-width="120px">
            <el-alert
              class="step-form__alert"
              title="确认转账后，资金将直接打入对方账户，无法退回。"
              type="info"
              show-icon>
            </el-alert>
            <el-form-item label="付款账户：">
              <span>{{ dataForm.payAccount }}</span>
            </el-form-item>
            <el-form-item label="收款账户：">
              <span>{{ dataForm.receiverAccount }}</span>
            </el-form-item>
            <el-form-item label="收款人姓名：">
              <span>{{ dataForm.receiverName }}</span>
            </el-form-item>
            <el-form-item label="转账金额：">
              <span class="step-form__money">{{ dataForm.amount }}</span>
              <span class="step-form__uppercase">（{{ dataForm.uppercase }}）</span>
            </el-form-item>
            <div class="step-divider"></div>
            <el-form-item label="支付密码：" prop="password">
              <el-input type="password" v-model="dataFormTwoStep.password" placeholder="支付密码"></el-input>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="dataFormTwoStepSubmitHandle()" :loading="dataFormTwoStepSubmitLoading">提交</el-button>
              <el-button @click="previousStepHandle()">上一步</el-button>
            </el-form-item>
          </el-form>
          <div v-if="stepActive === 3" class="step-result">
            <div class="step-result__icon">
              <i class="el-icon-success"></i>
            </div>
            <p class="step-result__title">操作成功</p>
            <p class="step-result__description">预计两小时内到账</p>
            <div class="step-result__extra">
              <el-row>
                <el-col :span="10" class="step-result__extra-label">付款账户：</el-col>
                <el-col :span="14">{{ dataForm.payAccount }}</el-col>
              </el-row>
              <el-row>
                <el-col :span="10" class="step-result__extra-label">收款账户：</el-col>
                <el-col :span="14">{{ dataForm.receiverAccount }}</el-col>
              </el-row>
              <el-row>
                <el-col :span="10" class="step-result__extra-label">收款人姓名：</el-col>
                <el-col :span="14">{{ dataForm.receiverName }}</el-col>
              </el-row>
              <el-row>
                <el-col :span="10" class="step-result__extra-label">转账金额：</el-col>
                <el-col :span="14"><span class="step-form__money">{{ dataForm.amount }}</span> 元</el-col>
              </el-row>
            </div>
            <div class="step-result__actions">
              <el-button type="primary" @click="againHandle()">再转一笔</el-button>
              <el-button>查看账单</el-button>
            </div>
          </div>
          <div class="step-divider"></div>
          <div class="step-desc">
            <h3>说明</h3>
            <h4>转账到支付宝账户</h4>
            <p>如果需要，这里可以放一些关于产品的常见问题说明。如果需要，这里可以放一些关于产品的常见问题说明。如果需要，这里可以放一些关于产品的常见问题说明。</p>
            <h4>转账到银行卡</h4>
            <p>如果需要，这里可以放一些关于产品的常见问题说明。如果需要，这里可以放一些关于产品的常见问题说明。如果需要，这里可以放一些关于产品的常见问题说明。</p>
          </div>
        </el-card>
      </main>
    </div>
  </div>
  <script src="../../aui/plugins/vue-2.5.17/vue.js"></script>
  <script src="../../aui/plugins/element-2.4.5/index.js"></script>
  <script src="../../aui/plugins/axios-0.18.0/axios.min.js"></script>
  <script src="../../aui/js/utils.js"></script>
  <script>
    (function () {
      var vm = window.vm = new Vue({
        el: '.aui-wrapper',
        data: function () {
          return {
            stepActive: 0,
            dataForm: {
              payAccount: 'service@renren.io',
              receiverType: 1,
              receiverAccount: 'test@example.com',
              receiverName: 'Alex',
              amount: 500,
              uppercase: ''
            },
            dataRule: {
              payAccount: [
                { required: true, message: '必填项不能为空', trigger: 'change' }
              ],
              receiverAccount: [
                { required: true, message: '必填项不能为空', trigger: 'blur' }
              ],
              receiverName: [
                { required: true, message: '必填项不能为空', trigger: 'blur' }
              ],
              amount: [
                { required: true, message: '必填项不能为空', trigger: 'blur' }
              ]
            },
            dataFormTwoStep: {
              password: '123456'
            },
            dataRuleTwoStep: {
              password: [
                { required: true, message: '必填项不能为空', trigger: 'blur' }
              ]
            },
            dataFormTwoStepSubmitLoading: false
          }
        },
        beforeCreate () {
          vm = this;
        },
        methods: {
          // 表单提交
          dataFormSubmitHandle: function () {
            vm.$refs['dataForm'].validate(function (valid) {
              if (valid) {
                vm.dataForm.uppercase = vm.$utils.digitUppercase(vm.dataForm.amount);
                vm.$refs['dataForm'].clearValidate();
                vm.stepActive++;
              }
            });
          },
          // 上一步
          previousStepHandle: function () {
            vm.$refs['dataFormTwoStep'].clearValidate();
            vm.stepActive--;
          },
          // 表单提交, 第二步
          dataFormTwoStepSubmitHandle: function () {
            vm.$refs['dataFormTwoStep'].validate(function (valid) {
              if (valid) {
                vm.dataFormTwoStepSubmitLoading = true;
                window.setTimeout(function () {
                  vm.dataFormTwoStepSubmitLoading = false;
                  vm.stepActive += 2;
                }, 500);
              }
            });
          },
          // 再转一笔
          againHandle: function () {
            vm.stepActive = 0;
          }
        }
      });
    })();
  </script>
</body>
</html>